<template>
   <div>
      <!-- 猜你喜欢 标题一-->
      <div class="like-header" v-if="ruleForm.styleTypeTitle == 0">
        <div class="title-wrap">
          <div class="left-title">
            <div class="h1">
              <span>
                热卖爆款
              </span>
              
            </div>
            <div class="tag">
              海量货源 专享价格
            </div>
          </div>
          <div class="all">
            查看全部 >
          </div>
        </div>
      </div>
      <!-- 猜你喜欢 标题2一-->
      <div class="like-header-2" v-if="ruleForm.styleTypeTitle == 1">
        <div class="left-header">
          <i class="line first"></i>
          <i class="left-radius" style="background: #d5dfff;"></i>
          <i class="left-radius"></i>
          <div class="h1">猜你喜欢</div>
          <i class="right-radius"></i>
          <i class="right-radius" style="background: #d5dfff;"></i>
          <i class="line last"></i>
        </div>
      </div>
      <!-- 瀑布流列表 -->
      <div 
        class="waterfalls-flow"
        :style="{
          paddingLeft: ruleForm.pagePadding + 'px',
          paddingRight:  ruleForm.pagePadding + 'px',
        }"
      >
        <!-- 奇盒子 -->
        <div class="column" 
          v-for="(item,index) in waterFallsData" 
          :key="index"
          :style="{
            marginRight: index == 1  ? 0 : ruleFormLocal.listStyle == 1 ? 0:  ruleForm.goodPadding + 'px',
          }"
        >
          <div class="good-item" 
            v-for="(goods,idx) in item" :key="idx"
            :style="{
              borderRadius: ruleForm.goodBorder == 0 ? '0' : '6px',
              marginBottom: ruleForm.goodPadding + 'px'
            }"
          >
            <div 
              :class="{'img-wrap': true,['scale' + ruleForm.imgScale]: ruleForm.goodStyle == 1}"
              
            >
              <img :src="goods.file">
            </div>
            <div 
              class="name"
              :style="{
                height: ruleForm.goodStyle == 1 ? '35.6px' : 'auto'
              }"
            >
              {{goods.title}}
            </div>
            <div class="price-wrap">
              <div class="price">
                ￥99.<span>00</span>
              </div>
              <div class="img">
                <i class="iconfont icongouwuche"></i>
              </div>
              <!-- <img src="/static/home/gouwuceh.png"> -->
            </div>
            <div class="discount">
              ￥99.00
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'GoodList',
   props: ['goodList','ruleForm'],

  data() {
    return {
      filterGood: this.goodList,// 不可变数据
      waterFallsData: [],
      ruleFormLocal: this.ruleForm
    }
  },
  beforeCreate() {
    console.log('beforeCreate',this.ruleFormLocal)
  },
  created() {
    console.log('created',this.ruleForm)
    this.getFilterGood(); // 瀑布流
  },
  beforeMount() {
     console.log('beforeMount',this.ruleForm)
  },
  mounted() {
    console.log('mounted',this.ruleForm)
  },
  beforeUpdate() {
    console.log('beforeUpdate',this.ruleForm)  
  },
  updated() {
      console.log('updated',this.ruleForm)  
  },
  watch: {
    ruleFormLocal: {
      handler: function (newValue,oldValue) {
        console.log(oldValue,'fuck',newValue)
        this.getFilterGood();
      },
      deep: true,
    }
  },
  methods: {
    getFilterGood() {
      if (this.ruleFormLocal.listStyle == 1) {
        this.waterFallsData = [this.filterGood]
        return;
      }
      let ouArray = [];
      let jiArray = [];
      this.filterGood.forEach((ele,index)=> {
        if ((index + 1) % 2 == 0) {
          ouArray.push(ele);
        } else {
          jiArray.push(ele);
        }
      })
      this.waterFallsData = [jiArray,ouArray]
    }
  }
}
</script>

<style lang="less" scoped>
  // 猜你喜欢标题一
  .like-header {
    text-align: left;
		height: 60px;
    padding: 0 9px;
    background: #fff;
		.title-wrap {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left-title {
        height: 44px;
				display: flex;
				align-items: baseline;
				.h1 {
					font-size: 15px;
					color: #000;
					font-weight: 700;
          margin-right: 6px;
          span {
            position: relative;
            z-index: 10;
          }
					&::before {
						content: '';
						display: block;
						position: relative;
						width: 62px;
						height: 10px;
						bottom: -21px;
						background: linear-gradient(to right,#fed188,#f6845b);
					}
				}
				.tag {
					font-size: 12px;
					color: #868686;
				}
      }
      .all {
        font-size: 12px;
        color: #f6845b;
      }
		}
		
	}
  // 猜你喜欢标题二
  .like-header-2 {
    height: 60px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    .left-header {
      display: flex;
      align-items: center;
      .line {
        width: 25px;
        height: 1px;
        background: #295cf2;
        &.first {
          margin-right: 8px;
        }
        &.last {
          margin-left: 8px;
        }
      }
      .left-radius ,.right-radius{
        width: 4px;
        height: 13px;
        border-radius: 4px;
        background: #295cf2;
      }
      .left-radius {
        transform: rotateZ(45deg);
        margin-right: 6px;
      }
      .right-radius {
        transform: rotateZ(135deg);
        margin-left: 6px;
      }
      .h1 {
        color: #000000;
        font-size: 15px;
        font-weight: 900;
        margin: 0 10px;
      }
    }
  }

	// 瀑布流
	.waterfalls-flow {
    text-align: left;
		display: flex;
		padding: 12px 9px;
		.column {
			display: flex;
			flex-direction: column;
			margin-right: 12px;
			flex: 1;
		}
		.column:last-child {
			margin-right: 0;
		}
		.good-item {
			width: 100%;
			background-color: #fff;
			border-radius: 6px;
			margin-bottom: 12px;
      padding-bottom: 10px;
      overflow: hidden;
			.img-wrap {
        width: 100%;
				img {
          width: 100%;
				}
			}
			.name {
				font-size: 12px;
				color: #000;
				padding: 0 3%;
				margin-top: 8px;
        margin-bottom: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; //行数
        -webkit-box-orient: vertical;
			}
			.price-wrap {
				display: flex;
				align-items: center;
				color: #ff0000;
				justify-content: space-between;
				padding: 0 3%;
				.price {
					font-size: 13px;
					span {
						font-size: 11px;
					}
				}
				.img {
          width: 23px;
          height: 23px;
          background: #fc7e07;
          line-height: 27px;
          text-align: center;
          color: #fff;
          border-radius: 50%;
				}
			}
			.discount {
				text-decoration: line-through;
				color: #b9b9b9;
				font-size: 10px;
        padding: 0 3%;
			}
		}
  }
  .scale0 {
    padding-bottom: 66.7%;
    position: relative;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  .scale1 {
    padding-bottom: 100%;
    position: relative;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  .scale2 {
    padding-bottom: 133.3%;
    position: relative;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  .scale3 {
    padding-bottom: 56.3%;
    position: relative;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  
  
</style>